<template>
  <div class="app-container">
    <el-form :model="hospitalSet"
             :rules="hospitalSetRules"
             label-width="100px"
             ref="hospitalSet"
             style="width: 60%"
    >
      <el-form-item label="医院编号" prop="hoscode">
        <el-input :disabled="disabled" v-model="hospitalSet.hoscode"/>
      </el-form-item>

      <el-form-item label="医院名称" prop="hosname">
        <el-input v-model="hospitalSet.hosname"/>
      </el-form-item>

      <el-form-item label="api基础路径" prop="apiUrl">
        <el-input v-model="hospitalSet.apiUrl"/>
      </el-form-item>

      <el-form-item label="联系人姓名" prop="contactsName">
        <el-input v-model="hospitalSet.contactsName"/>
      </el-form-item>
      <el-form-item label="联系人手机">
        <el-input v-model="hospitalSet.contactsPhone"/>
      </el-form-item>

      <el-form-item>
        <el-button @click="saveOrUpdate" type="primary">{{ textName }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import hospital from "../../api/hospital";

  export default {
    name: "add",
    //import引入的组件需要注入到对象中才能使用",
    components: {},
    data() {
      //这里存放数据",
      return {
        textName: '',//按钮名称
        disabled: true,//医院编号输入框是否禁用
        hospitalSet: {},
        //校验数据
        hospitalSetRules: {
          hosname: [
            {required: true, message: '请输入医院名称', trigger: 'blur'},
          ],
          hoscode: [
            {required: true, message: '请输入医院编号', trigger: 'blur'},
          ],
          apiUrl: [
            {required: true, message: '请输入医院api基础路径', trigger: 'blur'},
          ],
          contactsName: [
            {required: true, message: '请输入联系人名称', trigger: 'blur'},
            {max: 5, message: '最大长度为15字符', trigger: 'blur'}
          ]
        }
      };
    },
    //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
    created() {
      //获取路由id值
      //调用查询医院设置信息
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.textName = '修改';
        this.disabled = true;
        this.getHospSetById(id)
      } else {
        //不存医院id,则清除表单
        this.textName = '添加';
        this.disabled = false;
        this.hospitalSet = {}
      }
    },
    //方法集合",
    methods: {
      //根据路由id查询 根据id获取医院设置
      getHospSetById(id) {
        hospital.getHospitalSetById(id)
          .then(response => {
            this.hospitalSet = response.data
          })
      },

      saveOrUpdate() {
        if (!this.hospitalSet.id) {
          //不存在id添加
          this.saveHospSet()
        } else {
          //存在id修改 根据医院id修改
          this.updateHospSetById()
        }

      },

      //添加医院设置
      saveHospSet() {
        this.$refs.hospitalSet.validate((valid) => {
          if (valid) {
            hospital.saveHospitalSet(this.hospitalSet)
              .then(response => {
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
                //添加成功后路由跳转到医院设置列表
                this.$router.push({path: '/hospSet/list'})
              })
              .catch(error => {
                this.$message({
                  type: 'error',
                  message: '数据错误或重复'
                });
              })

          } else {
            console.log('error submit!!');
            return false;
          }
        })
      },
      //根据医院id修改
      updateHospSetById() {
        this.$refs.hospitalSet.validate((valid) => {
          if (valid) {
            hospital.updateHospitalSetById(this.hospitalSet)
              .then(response => {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                //添加成功后路由跳转到医院设置列表
                this.$router.push({path: '/hospSet/list'})
              })
              .catch(error => {
                this.$message({
                  type: 'error',
                  message: '数据错误或重复'
                });
              })

          } else {
            console.log('error submit!!');
            return false;
          }
        })
      }

    },
//监听属性 类似于data概念",
    computed: {},
//监控data中的数据变化",
    watch: {},
//生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
    beforeCreate() {
    },
//生命周期 - 挂载之前",html模板未渲染
    beforeMount() {
    },
//生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
    mounted() {
    },

//生命周期 - 更新之前",数据模型已更新,html模板未更新
    beforeUpdate() {
    },
//生命周期 - 更新之后",数据模型已更新,html模板已更新
    updated() {
    },
//生命周期 - 销毁之前",
    beforeDestroy() {
    },
    destroyed() {
    },
//生命周期 - 销毁完成",
//如果页面有keep-alive缓存功能，这个函数会触发",
    activated() {
    }
  }
</script>
<style scoped>

</style>
